<template>
  <div>
    <div class="person_body clearfix">
      <y-side :type="'jszm'" :showSide="'zm'"></y-side>
      <div class="person_content">
        <div class="person_title">
          <!-- 商家入驻 -->
          {{webInfo.recruitTitle}}
        </div>
        <div class="person_info">
          <div class="clearfix" v-html="webInfo.recruitInfo"></div>
          <!-- 进度条 -->
          <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
            <el-step title="1.签订协议" ></el-step>
            <el-step title="2.填写资料" ></el-step>
            <el-step title="3.等待审核" ></el-step>
          </el-steps>
          <!-- 同意协议模块 -->
          <div v-if="active===0">
          <el-card class="box-card" shadow="never">
            <div class="text item">
              <p style="font-weight: bold;text-align:center;font-size: 18px">{{contentTitle}}</p>
              <p style="text-indent: 30px;">{{contentHeader}}</p>
              <p style="text-indent: 30px;">{{content}}</p>
            </div>
          </el-card>
          <el-card class="box-card" shadow="never">
            <el-checkbox v-model="checked">我已阅读并同意此协议 <span style="color: red">（温馨提示：阅读整个协议，才能进行下一步。）</span></el-checkbox>
          </el-card>
          </div>
          <!-- 填写资料模块 -->
          <div v-if="active===1">
            <el-card class="box-card" shadow="never">
              <el-form ref="form" :model="form" label-width="80px" :rules="rules">


                <el-form-item label="店铺头像" :label-width="formLabelWidth" prop="img" ref="licenseUpload">
                  <el-upload
                          style="border: 1px dashed #d9d9d9;width:100px;height:100px;border-radius: 6px;"
                          class="avatar-uploader"
                          action="http://192.168.1.33:7000/business/business/upload"
                          :show-file-list="false"
                          :headers="headerObj"
                          :on-success="handleLicenseSuccess"
                          :before-upload="beforeAvatarUpload">
                    <img v-if="form.img" :src="form.img" class="avatar" >
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>


                <el-form-item label="店铺名称" :label-width="formLabelWidth" prop="name">
                  <el-input v-model="form.name" autocomplete="off" style="width: 230px;"></el-input>
                </el-form-item>

                <el-form-item label="详细地址" :label-width="formLabelWidth" prop="address">
                  <el-input v-model="form.address" autocomplete="off" style="width: 230px;"></el-input>
                </el-form-item>

                <el-form-item label="店铺简介" :label-width="formLabelWidth" prop="remark">
                  <el-input v-model="form.remark" autocomplete="off" style="width: 230px;"></el-input>
                </el-form-item>

                <el-form-item label="所在地">
                  <el-select v-model="form.areaid">
                    <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>

              </el-form>
            </el-card>
          </div>
          <!-- 等待审核模块 -->
          <div v-if="active===2">
            <el-card class="box-card" shadow="never">
              <div style="margin: 0 auto;width: 300px">
                <el-button type="success" icon="el-icon-check" circle style="margin-left: 130px"></el-button>
                <p style="font-size: 20px;text-align: center;margin-top: 10px">发送审核成功</p>
                <p style="font-size: 16px;text-align: center;margin-top: 10px">请等待管理员审核</p>
              </div>
            </el-card>
          </div>
          <!-- 操作按钮 -->
          <el-button-group style="float: right;padding-top: 5px;">
            <el-button type="primary" icon="el-icon-arrow-left" @click="back" v-if="active===1">上一步</el-button>
            <el-button type="primary" @click="next" v-if="active!==2">下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            <router-link :to="{path: '/'}" class="text_link">
              <el-button type="primary" v-if="active===2" @click="next">返回</el-button>
            </router-link>
          </el-button-group>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import YSide from '/src/components/TerraceSide'
export default {
  head () {
      return {
        title:'-商家入驻',
        meta: [
            {
                hid: 'keywords',
                name: 'keywords',
                content: ''
            },
            {
                hid: 'description',
                name: 'description',
                content: ''
            }
        ]
      }
  },
  data () {
    return {
      webInfo: {
         'recruitTitle':'',
          recruitInfo: '<p> <br> </p>',
      },
      active: 0,
      contentTitle:'菜狗店铺入驻协议',
      contentHeader:'本协议由双方在自愿、同等、公允及诚恳信用原那么的根底上.依据《史华人民共和国合同法》等相关法律、法规的规定，经友好协商达成以下协议，供双方共同遵守。',
      content:'乙方保证其向甲方供应的全部证明文件真实、精确且不存在超过时效的问题，如因上述缘由发生纠纷或被相关国家主管机关惩罚，商户应当独立担当全部责任，如给甲方(包括其合作伙伴、代理人、职员等〕造成损失的，乙方同意赔偿其全部损失。',
      checked: false,
      formLabelWidth: '120px',
      form:{
        img:'',
      },
      options:[],
      token:"",
      rules: {
        name: [
          { required: true, message: '请输入真实店铺名称', trigger: 'blur' },
        ],
        address: [
          { required: true, message: '请输入店铺详细地址，精确到门牌号', trigger: 'blur' },
        ],
        img: [
          { required: true, message: '请上传店铺头像', trigger: 'change' }
        ],
        remark: [
          { required: true, message: '请输入店铺的详细介绍', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.$http.get("/area/area/findAllArea").then(result => {
      this.options=result.data.data
      console.log(this.options);
    })
  },
  methods: {
    //下一步
    next() {
      if (this.checked===true){
        if(this.active===1){
          var that=this;
          this.$refs['form'].validate((valid) => {
            if (valid) {
              this.$http.post("/shop/api/shop/insertShop", this.form).then(function (resp) {
                console.log(resp)
                if (resp.data.code === 2000) {
                  that.active++;
                  this.$root.istype111=2;
                }
              })
            }else {
              return false;
            }
          });
        }
        if (this.active===0){
          this.active++;
        }
        if (this.active===2){
          this.active++;
        }
      }else {
        this.$notify.warning({
          title: '警告',
          message: '请勾选我已阅读并同意此协议！',
          showClose: false
        });
      }
    },
    //上一步
    back(){
      if (this.active-- ===0){
        this.$notify.warning({
          title: '警告',
          message: '没有上一步！',
          showClose: false
        });
      }
    },
    // 营业执照上传成功后回显
    handleLicenseSuccess(res, file) {
      this.form.img = res.data;
      console.log(res.data)
      this.$refs.licenseUpload.clearValidate();
    },
    // 图片上传校验
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
  },
  mounted () {
    this.token = window.localStorage.getItem("token");
  },
  computed:{
    headerObj(){
      return{
        token:this.token
      };
    }
  },
  components: {
    YSide
  }
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
  .person_body {
    width: 1200px;
    margin: 30px auto 0;
    min-height: 1000px;
  }
  .person_content {
    width: 1012px;
    float: right;
    background: #fff;
    border-radius: 6px;
    .person_title {
      font-size: 14px;
      font-weight: 700;
      color: #333;
      text-align: center;
      line-height: 100px;
    }
  }
  .person_info {
    padding: 0px 50px 50px;
    min-height: 400px;
    font-size: 14px;
    color: #333;
    line-height: 28px;
  }
  .recruit_info {
    margin-top: 40px;
    .recruit_title {
      .cols {
        display: inline-block;
        width: 4px;
        height: 14px;
        background: rgba(51, 51, 51, 1);
        position: relative;
        top: 2px;
        margin-right: 4px;
      }
      font-weight: 700;
    }
    .msg_rows {
      margin-top: 10px;
      padding-left: 10px;
    }
  }
  .apply_btn {
    display: inline-block;
    width: 160px;
    line-height: 36px;
    color: #fff;
    background: rgba(213, 20, 35, 1);
    text-align: center;
    border-radius: 6px;
    position: relative;
    left: 50%;
    margin-left: -80px;
    margin-top: 10px;
    &:hover {
      text-decoration: none;
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>
